/**
 * 用户和管理员共用的panel
 * @Author bian
 * @CreateDate 2016.11.30
 */
// base
require("../base");

require("./LoginPanel.scss");

const  PropTypes = React.PropTypes

// code
class LoginPanel extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            "userName": "",
            "password" : ""
        };
    }

    updateInput(name,event){
        var change = {};
        change[name] = event.target.value;
        this.setState(change);
    }

    componentDidMount(){
        var self = this
        const {login} = self.props
        document.addEventListener("keypress", function(e){
            var key = e.which || e.keyCode;
            if (key === 13) { // 13 is enter
                // code for enter
                login(self.state.userName,self.state.password)
            }
        })
    }

    render(){
        var self = this;
        var {login,isAccountRight,isPwdRight} = self.props;
        var userName = this.state.userName;
        var password = this.state.password;

        return (
            <div>
                <div className="login_panel bln">
                    <div className="login_panel_title">登录慕课网</div>
                    <form className="login_form ">
                        <div className="error_hint">
                            { isAccountRight == -1 ? <p>账户名称错误</p> : isPwdRight == -1 ? <p>密码错误</p> : isPwdRight == 1 ? <p style={{color : "green"}}>密码正确</p> : null}
                        </div>
                        <div className="form_component_wr form_input">
                            <input type="text" value={this.state.userName} onChange={this.updateInput.bind(this,"userName")} className="login_panel_input" placeholder="用户名"/>
                        </div>
                        <div className="form_component_wr form_input">
                            <input type="password" value={this.state.password} onChange={this.updateInput.bind(this,"password")} className="login_panel_input" placeholder="密码"/>
                        </div>
                        <div className="form_component_wr form_btn">
                            <div className="login_btn" onClick={login.bind(this,userName,password)}>
                                登录
                            </div>
                        </div>
                    </form>
                    <div className="hint">
                        <div className="hint_ele_cr">
                            <a href="#"><span className="hint_ele">忘了密码</span></a>
                            <span className="hint_split">&nbsp;|&nbsp;</span>
                            <a href="#"><span className="hint_ele">注册新帐号</span></a>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

LoginPanel.propTypes = {
    isAccountRight  : PropTypes.number.isRequired,
    isPwdRight : PropTypes.number.isRequired,
    login : PropTypes.func.isRequired
}

export default LoginPanel